$side-nav-transition-speed: 0.2s;
$side-nav-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
$devsite-text-link: #3982f7;

// We always want the entirety of the side-nav.scss to be inlined in the page
// so we tell purgecss to "ignore" it—in other words "don't purge it".
side-nav {
  @include apply-utility('stack', '700');
  height: 100%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;

  @include media-query('lg') {
    // pointer-events: auto;
    // position: static;
    // visibility: visible;
    display: none;
  }

  // Create an overlay which will cover the site and act as a click target
  // to close the side-nav when it's expanded.
  &::before {
    background: rgba(get-color('black'), 0.4);
    content: '';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity $side-nav-transition-speed $side-nav-transition-ease;
    width: 100%;

    @include media-query('lg') {
      display: none;
    }
  }

  navigation-tree {
    width: 100%;
  }

  navigation-tree,
  navigation-rail {
    // By default the navigation-tree and navigation-rail hide themselves on
    // mobile because they're duplicated in the desktop view.
    // This forces them to display only when they're appearing inside of the
    // side-nav.
    display: block;
    height: 100%;
  }
}

side-nav[expanded] {
  pointer-events: auto;
  visibility: visible;

  &::before {
    opacity: 1;
  }

  .side-nav__container {
    transform: translate(0, 0);
  }
}

.side-nav__container {
  @include elevation(2);
  background: var(--color-bg);
  height: 100%;
  max-width: px-to-rem(360px);
  overflow: hidden;
  transform: translate(-102%, 0); // 102% to keep box-shadow offscreen
  transition: none;
  width: 85vw;
}

.side-nav__container > * {
  transition: none;
}

side-nav[animating] {
  visibility: visible;

  .side-nav__container {
    transition: transform $side-nav-transition-speed $side-nav-transition-ease;
  }
  
  .side-nav__container > * {
    transition: transform $side-nav-transition-speed $side-nav-transition-ease,
                opacity $side-nav-transition-speed $side-nav-transition-ease; // stylelint-disable-line
    visibility: visible;
  }
}

side-nav .navigation-rail {
  &__close {
    border: 0;
    color: var(--color-secondary-text);
    margin: 0;
    padding: 0;
  }

  &__link {
    color: var(--color-secondary-text);
    font-weight: 500;

    &[data-state='active'] {
      color: $devsite-text-link;
    }
  }
}

side-nav[view='project'] {
  navigation-rail {
    opacity: 0;
    transform: translate(100%, 0);
    visibility: hidden;
  }

  navigation-tree {
    opacity: 1;
    transform: translate(0, -100%);
  }
}

side-nav[view='site'] {
  navigation-rail {
    opacity: 1;
    transform: translate(0, 0);

    &__close {
      border: 0;
      color: var(--color-secondary-text);
      margin: 0;
      padding: 0;
    }
  
    &__link {
      color: var(--color-secondary-text);
      font-weight: 500;
    }

    &__link[data-state='active'] {
      color: $devsite-text-link;
    }
  }

  navigation-tree {
    opacity: 0;
    transform: translate(-100%, -100%);
    visibility: hidden;
  }
}
